Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Improve Products block Attributes Filter Inspector Controls #8583

Merged
merged 26 commits into from
Mar 8, 2023
Merged

Improve Products block Attributes Filter Inspector Controls #8583

merged 26 commits into from
Mar 8, 2023

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Feb 28, 2023 •
edited
Loading

This PR is meant to improve the UI and UX behind the Attributes filter within the Inspector Controls of the “Products (Beta)“ block. While doing so, I wanted to use the original Attribute selector component we had (AttributeTermControl) instead of creating a new, almost same, one. As such, this PR does a bunch of things to improve and extend that component as well.

In particular:

  • It refactors the useProductAttributes hook that was created for the draft filter. The refactored hook is now available in the shared code, instead of just the product-query block directory, and has been modified to achieve the following:
    • It fetches both terms AND attributes via the API (previously, we got the attributes from the settings, but we'd get
      partial objects compared to the API? Maybe a follow-up to this could be to check why the attributes stored in the settings are incomplete?).
    • Make sure the return values match the ones expected from search items.
  • Improves the functionality of the SearchListControl component with the following additions:
    • Allow the search input to also be a Token-based input.
    • Allow the search control to search within collapsed properties (previously, the search control would only return results if properties were uncollapsed).
    • Use core CheckboxControl instead of radio buttons for items having children (besides using the core component, it also helps because CheckboxControl includes the indeterminate state, which was required by the design spec).
      • This checkbox now acts more intuitively: If indeterminate or unchecked, it will check all children, otherwise, it will uncheck all the children.
    • Refactor styles for the component and also adds some more semantic classes.
    • Enable correct keyboard navigation through the component.
    • Preload attributes and terms.
    • Improves type signatures related to this component.
  • It adds this component to the Inspector Controls, plus a link to manage attributes in the store.
  • Implement type signatures for the ProductAttributeTermControl component and remove the withAttributes HOC wrapping it, in favor of the useProductAttributes hook.

Closes #8135

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Screenshot 2023-03-01 at 00 31 19

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

Simple happy path
  1. Add a Products (Beta) block to your page.
  2. Open the Inspector Controls and add the “Product Attributes” advanced filter.
  3. The Attributes selector component should show up in an uninteractable loading state.
  4. Once loading finishes, the Attributes should appear, collapsed.
  5. Uncollapse a section
  6. Select a few attributes.
  7. Publish your page.
  8. Check on the frontend to see that the correct products are displayed.
Checkbox behavior
  1. Repeat steps 1–5 above.
  2. Click on some terms checkboxes.
  3. Notice that the parent checkbox will be in the indeterminate state ([-]).
  4. Select all the children.
  5. Notice parent checkbox will be checked.
  6. Uncheck the parent checkbox.
  7. All the children should be unchecked.
  8. Check the parent checkbox.
  9. All the children should be checked.
  10. Uncheck a few children.
  11. Check the parent checkbox.
  12. All children should be checked.
Token input behavior
  1. Repeat steps 1–4 above.
  2. Start typing something within the input.
  3. The checklist should be correctly filtered showing breadcrumbs.
  4. Try the behavior for both collapsed and uncollapsed states.
  5. Every time a checkbox is checked, it should have the corresponding token in the input field and viceversa.
  6. Tokens can be correctly removed from the input field and this will uncheck the corresponding checkbox.
Notes

Note that the SearchListControl is used in other components which may or may not be covered by E2E tests, and this PR refactors it. I tried my best to avoid any possible regression, but please do double check with components you know. Some examples are Filter By Attribute block or Featured Product/Category.

Known issues
  1. Product Query: When first opening the advanced filters, “Products attributes” show an unexpected [0] woocommerce#42497
  2. Product Query: Attributes filters do not update the editor preview correctly #8530
  3. There is a TypeScript error in item.tsx#L118 due to wrong Gutenberg types. Will update them upstream.
  4. When searching for a full text of an item and pressing Enter the token will be added but the text will remain. This is due to an issue upstream.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Products block: improved UX and UI for the Product Attributes advanced filter.

@sunyatasattva
Remove feature flag from Element variations
534465c 
Removes feature flag from:

* Product Summary
* Product Template
* Product Title
@sunyatasattva
Refactor useProductAttributes hook
eed60fb 
* Move it into the shared hooks.
* Fetch both terms AND attributes via the API (previously,
we got the attributes from the settings, but we'd get
partial objects compared to the API? Maybe a follow-up
to this could be to check why the attributes stored in
the settings are incomplete?)
* Make sure the return values match the ones expected
from search items.
@sunyatasattva
Remove attribute-related types from PQ directory
eb5e92c
@sunyatasattva
Improve functionality of SearchListControl
14e9373 
* Allow the search input to be a Token based input.
* Allow for search input to search even collapsed properties.
* Use core `CheckboxControl` instead of radio buttons for
items having children (includes undeterminated state).

 Please enter the commit message for your changes. Lines starting
@sunyatasattva
Enable removal of tokens from the input
3be43c6
@sunyatasattva
Improve styles:
3860bd9 
* Refactor classnames for `SearchItem`.
* Add more semantic classes.
* Align count label and caret to the right.
* Make caret switch direction on expanded.
* `cursor: pointer` on collapsible items.
* Indent children of collapsible items.
@sunyatasattva
Correctly pass through class names to search item
0efce7c
@sunyatasattva
Enable keyboard navigation for collapsible items
0b1cc7f
@sunyatasattva
Add link to manage attributes
0f780d9
@sunyatasattva
Change label inside the inspector controls
5a90757
@sunyatasattva
Make search list attached when token type
f9c411e
@sunyatasattva
Implement more sophisticated behavior of parent checkbox
656a7b3 
* If indeterminate or unchecked, it will check all children.
* If checked, it will uncheck all children.
@sunyatasattva
Fixed premature loading
48e7749
@sunyatasattva
Hide the X from the placeholder when loading
6e3490d
@sunyatasattva
Fix indeterminate checkmark behavior
d87ae6d
@sunyatasattva
Fix TypeScript errors
562c920
@sunyatasattva
Fix isSingle usecases
15d1d78
@sunyatasattva
Remove hardcoded isSingle from expandableSearchListItem
20b9242
@sunyatasattva
item.children can be undefined
6236c57
@sunyatasattva
Make sure item.children is not undefined
dd92db5
@sunyatasattva sunyatasattva added type: enhancement The issue is a request for an enhancement. focus: components Work that introduces new or updates existing components. focus: blocks Specific work involving or impacting how blocks behave. block-type: product-query Issues related to/affecting all product-query variations. labels Feb 28, 2023
@sunyatasattva sunyatasattva self-assigned this Feb 28, 2023
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team February 28, 2023 23:31
@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8583.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
wc-blocks.js wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
active-filters.js lodash, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
all-reviews.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
attribute-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
breadcrumbs.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
cart.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
catalog-sorting.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
customer-account.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
featured-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
featured-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
filter-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
store-notices.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
price-filter.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
product-best-sellers.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-new.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-query.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
product-results-count.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
rating-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
reviews-by-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
single-product.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 485
  • Total errors: 2309

⚠️ ⚠️ This PR introduces new TS errors on 7 files:

assets/js/blocks/active-filters/block.tsx

assets/js/blocks/attribute-filter/block.tsx

assets/js/blocks/product-query/inspector-controls/attributes-filter.tsx

assets/js/blocks/products-by-attribute/edit-mode.tsx

assets/js/blocks/products-by-attribute/inspector-controls.tsx

assets/js/editor-components/product-attribute-term-control/index.tsx

assets/js/editor-components/search-list-control/item.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2023 •
edited
Loading

Size Change: +15.6 kB (+1%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters-frontend.js 7.97 kB +3 B (0%)
build/active-filters-wrapper-frontend.js 5.98 kB -5 B (0%)
build/active-filters.js 7.37 kB +56 B (+1%)
build/all-products-frontend.js 11.7 kB +2 B (0%)
build/all-products.js 37.4 kB +991 B (+3%)
build/all-reviews.js 7.66 kB +8 B (0%)
build/attribute-filter-frontend.js 22.5 kB +49 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB -1 B (0%)
build/attribute-filter-wrapper-frontend.js 4.49 kB +33 B (+1%)
build/attribute-filter.js 13.1 kB +686 B (+6%) 🔍
build/breadcrumbs.js 2.05 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.74 kB +53 B (+1%)
build/cart-blocks/cart-express-payment-frontend.js 720 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +2 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB +1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB +4 B (0%)
build/cart-frontend.js 28.9 kB +4 B (0%)
build/cart.js 47.5 kB +57 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB -2 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +2 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB -1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +2 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB +3 B (0%)
build/checkout-blocks/payment-frontend.js 8.43 kB +4 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.28 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB +5 B (0%)
build/checkout-frontend.js 30.4 kB -16 B (0%)
build/checkout.js 44.2 kB -2 B (0%)
build/customer-account.js 3.16 kB +82 B (+3%)
build/featured-category.js 14 kB +494 B (+4%)
build/featured-product.js 14.2 kB +571 B (+4%)
build/filter-wrapper-frontend.js 14.1 kB -2 B (0%)
build/handpicked-products.js 7.91 kB +668 B (+9%) 🔍
build/legacy-template.js 5.31 kB +22 B (0%)
build/mini-cart-component-frontend.js 28 kB +3 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.87 kB +1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 573 B +260 B (+83%) 🆘
build/mini-cart-contents.js 16.6 kB +7 B (0%)
build/mini-cart.js 4.29 kB -2 B (0%)
build/price-filter-frontend.js 13.9 kB +3 B (0%)
build/price-filter-wrapper-frontend.js 6.99 kB +1 B (0%)
build/price-filter.js 8.38 kB -5 B (0%)
build/product-add-to-cart-frontend.js 6.7 kB -1 B (0%)
build/product-add-to-cart.js 8.61 kB +13 B (0%)
build/product-best-sellers.js 8.25 kB +654 B (+9%) 🔍
build/product-button-frontend.js 2.22 kB +2 B (0%)
build/product-categories.js 2.36 kB +2 B (0%)
build/product-category.js 9.24 kB +657 B (+8%) 🔍
build/product-image-frontend.js 2.22 kB -4 B (0%)
build/product-image.js 4.09 kB +6 B (0%)
build/product-new.js 8.25 kB +663 B (+9%) 🔍
build/product-on-sale.js 8.57 kB +665 B (+8%) 🔍
build/product-price-frontend.js 2.38 kB +61 B (+3%)
build/product-price.js 1.64 kB +60 B (+4%)
build/product-query.js 10.8 kB +4.17 kB (+63%) 🆘
build/product-rating.js 919 B -1 B (0%)
build/product-results-count.js 1.65 kB -1 B (0%)
build/product-sale-badge-frontend.js 1.45 kB -1 B (0%)
build/product-sale-badge.js 818 B +2 B (0%)
build/product-search.js 2.63 kB +3 B (0%)
build/product-sku.js 375 B -1 B (0%)
build/product-summary.js 919 B -1 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-tag.js 8.73 kB +660 B (+8%) 🔍
build/product-title.js 3.46 kB +2 B (0%)
build/product-top-rated.js 8.49 kB +665 B (+9%) 🔍
build/products-by-attribute.js 9.45 kB +917 B (+11%) ⚠️
build/rating-filter.js 7.42 kB -1 B (0%)
build/reviews-by-category.js 11.9 kB +654 B (+6%) 🔍
build/reviews-by-product.js 13 kB +619 B (+5%) 🔍
build/reviews-frontend.js 7.13 kB +3 B (0%)
build/single-product-frontend.js 17.9 kB +2 B (0%)
build/single-product.js 10.6 kB +657 B (+7%) 🔍
build/stock-filter.js 8.13 kB -2 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.88 kB +139 B (+2%)
build/wc-blocks-editor-style.css 5.88 kB +137 B (+2%)
build/wc-blocks-style-rtl.css 26.8 kB +67 B (0%)
build/wc-blocks-style.css 26.8 kB +67 B (0%)
build/wc-blocks-vendors.js 64.4 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 41.2 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button.js 3.99 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-rating-frontend.js 1.65 kB
build/product-sku-frontend.js 629 B
build/product-stock-indicator-frontend.js 1.31 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-tag-list-frontend.js 1.18 kB
build/product-title-frontend.js 1.65 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@sunyatasattva sunyatasattva changed the title Improve/8135 pq attribute filter inspector controls Improve Products block Attributes Filter Inspector Controls Mar 1, 2023
@sunyatasattva
Copy link
Contributor Author

@nefeline This should now be ready for review 🙏

@nefeline
Copy link
Contributor

nefeline commented Mar 3, 2023

@nefeline This should now be ready for review 🙏

Awesome! I'm getting started now 🙌

nefeline
nefeline suggested changes Mar 3, 2023
View reviewed changes
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! It's fantastic to see all of these improvements in place 🎉

I have encountered some errors, all of them detailed below:

Test results:

Simple happy path

Add a Products (Beta) block to your page.
Open the Inspector Controls and add the “Product Attributes” advanced filter.
The Attributes selector component should show up in an uninteractable loading state.

✅ Confirmed the attributes selector component shows up as expected.

Once loading finishes, the Attributes should appear, collapsed.

✅ Confirmed the attributes show up collapsed:

Screenshot 2023-03-03 at 17 58 03

Uncollapse a section
Select a few attributes.

✅ Confirmed it's possible to uncollapse the sections and select the terms:

Screenshot 2023-03-03 at 18 02 07

Publish your page.
Check on the frontend to see that the correct products are displayed.

❌ At this stage, on the FE, a PHP notice is triggered, and the page is blank:

Notice: Undefined index: taxonomy in /Users/patriciahillebrandt/Woo/plugins/woocommerce-blocks/src/BlockTypes/ProductQuery.php on line 301

I was able to circumvent this error by doing a quick refactor to the get_product_attributes_query method as the $attributes variable received has a different format than the one expected (e.g. it doesn't include the 'taxonomy' name for example.):

Screenshot 2023-03-03 at 17 43 49

This is the quick fix I put in place to circumvent it:

private function get_product_attributes_query( $attributes = array() ) {
		$tax_queries = array();
		foreach ( $attributes as $attribute ) {
			$term_id = $attribute['termId'];
			$term = get_term( $term_id );

			if ( $term && ! is_wp_error( $term ) ) {
				$taxonomy = $term->taxonomy;
				if ( ! array_key_exists( $taxonomy, $tax_queries ) ) {
					$tax_queries[ $taxonomy ] = array(
						'taxonomy' => $taxonomy,
						'field'    => 'term_id',
						'terms'    => array( $term_id ),
						'operator' => 'IN',
					);
				} else {
					$tax_queries[ $taxonomy ]['terms'][] = $term_id;
				}
			}
		}

		return array(
			'tax_query' => array_values( $tax_queries ),
		);
}

This is not necessarily the final solution; another alternative could be to ensure the information received via the $attributes variable matches the expected by this method instead.

With this error out of the way, I was able to confirm the FE correctly displays all relevant products (in this test, all products with the colors blue and gray are listed, even though, in some cases, the images of the products displayed are matching the product variation options available and not necessarily the filtered colors (and this is pre-existing).

🗒️ Sidenote: do we have an issue opened for this already? It feels wrong to display a red hoodie if the filter is deliberately specifying only blue product variations should be displayed (I noticed this same behavior with the attribute filter before).

Screenshot 2023-03-03 at 18 14 35

Checkbox behavior

Repeat steps 1–5 above.
Click on some terms checkboxes.
Notice that the parent checkbox will be in the indeterminate state ([-]).

✅ Confirmed the parent checkbox is in the indeterminate state:

Screenshot 2023-03-03 at 19 00 24

Select all the children.
Notice parent checkbox will be checked.

✅ Confirmed the parent checkbox is checked when all children are selected:

Screenshot 2023-03-03 at 19 01 45

Uncheck the parent checkbox.
All the children should be unchecked.

✅ Confirmed all children are unchecked, but with one limitation:

❌ When a combination of terms from different taxonomies is selected, if you uncheck all of them for one category in particular, the terms are removed for all categories instead (not just the selected one):

Screen.Recording.2023-03-03.at.18.36.33.mov

Check the parent checkbox.
All the children should be checked.

✅ Confirmed all children are checked when the parent checkbox is clicked.

Uncheck a few children.
Check the parent checkbox.
All children should be checked.

✅ Confirmed this works as expected.

Token input behavior

Repeat steps 1–4 above.
Start typing something within the input.
The checklist should be correctly filtered showing breadcrumbs.

✅ Confirmed the checklist is correctly filtered and its showing the breadcrumbs:

Screenshot 2023-03-03 at 18 31 58

❌ When the name of a term is typed, the token is added as expected, but the typed text is still displayed on the side (you have to manually remove the text to be able to search for the next term):

Screen.Recording.2023-03-03.at.18.45.22.mov

Try the behavior for both collapsed and uncollapsed states.

✅ Confirmed it works as expected with both collapsed and uncollapsed states.

Every time a checkbox is checked, it should have the corresponding token in the input field and vice-versa.

✅ Confirmed it works as expected.

Tokens can be correctly removed from the input field and this will uncheck the corresponding checkbox.

✅ Confirmed it works as expected.

@sunyatasattva
Copy link
Contributor Author

Hey @nefeline!

Thanks a lot for the extremely helpful review!

❌ At this stage, on the FE, a PHP notice is triggered, and the page is blank:

Ouch, silly me for not noticing this. I did some last minute refactoring of the types and I didn't check this thing. Thank you for providing also an alternative solution, but as you mentioned, I fixed it upstream so that the function receives the data it expects.

🗒️ Sidenote: do we have an issue opened for this already? It feels wrong to display a red hoodie if the filter is deliberately specifying only blue product variations should be displayed (I noticed this same behavior with the attribute filter before).

Yea, this was pre-existing in all our implementations (including the front-end filter). We do not have an issue for this AFAIK. Also I'm not sure how the products work under the hood. If you go to the product page, you'll see that “red hoodie” is the default picture. Pictures are then assigned to product “variations”, not attributes themselves. So I guess this would need a deep dive into how all these things work to make it happen. Definitely weird, though, I would agree.

❌ When a combination of terms from different taxonomies is selected, if you uncheck all of them for one category in particular, the terms are removed for all categories instead (not just the selected one):

Fixed. My math skills faltered 😅

❌ When the name of a term is typed, the token is added as expected, but the typed text is still displayed on the side (you have to manually remove the text to be able to search for the next term):

Unfortunately this is a known issue I mentioned in the OP:

When searching for a full text of an item and pressing Enter the token will be added but the text will remain. This is due to an issue upstream.

There was a workaround I had found, but it had its own weird side-effects unfortunately (the text would be removed also when clicking on checkboxes in my workaround). Having to decide between the lesser evil, I chose this route, which, in the end, preserves the text typed by the user which can be useful when you are doing a partial search and not a full match. It's not ideal, but it was either this, my other workaround, or rebuilding the Token input from scratch.

I'll try and contribute upstream for this.

@sunyatasattva sunyatasattva requested a review from nefeline March 6, 2023 14:37
nefeline
nefeline approved these changes Mar 7, 2023
View reviewed changes
Copy link
Contributor

@nefeline nefeline left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for addressing the feedback! Regarding the code, I've left just one minor question & optional change, other than that this is looking sharp & I'm pre-approving!

Thanks a lot for the extremely helpful review!

Anytime! 🙌

I fixed it upstream so that the function receives the data it expects.

✅ Awesome, thanks! I can confirm the notice is now gone, and the correct products are displayed on the FE with this fix in place.

Fixed. My math skills faltered 😅

✅ 😄 It happens to the best of us, thanks for addressing the issue! A can confirm when a combination of terms from different taxonomies is selected; if you uncheck all of them for one category in particular, the correct/expected terms are now removed, and not all of them.

There was a workaround I had found, but it had its own weird side-effects unfortunately (the text would be removed also when clicking on checkboxes in my workaround). Having to decide between the lesser evil, I chose this route, which, in the end, preserves the text typed by the user which can be useful when you are doing a partial search and not a full match. It's not ideal, but it was either this, my other workaround, or rebuilding the Token input from scratch. I'll try and contribute upstream for this.

Gotcha: sorry I missed the description of this limitation in particular. The path chosen here makes sense, thanks for clarifying!

Yea, this was pre-existing in all our implementations (including the front-end filter). We do not have an issue for this AFAIK. Also I'm not sure how the products work under the hood. If you go to the product page, you'll see that “red hoodie” is the default picture. Pictures are then assigned to product “variations”, not attributes themselves. So I guess this would need a deep dive into how all these things work to make it happen. Definitely weird, though, I would agree.

Thanks 👍 ! I'm opening a separate issue so we can keep track & investigate later on when time permits.

assets/js/base/context/hooks/use-product-attributes.ts Show resolved Hide resolved
@github-actions github-actions bot added this to the 9.8.0 milestone Mar 7, 2023
@sunyatasattva sunyatasattva merged commit dab5622 into trunk Mar 8, 2023
@sunyatasattva sunyatasattva deleted the improve/8135-pq-attribute-filter-inspector-controls branch March 8, 2023 16:22
@nefeline nefeline mentioned this pull request Dec 11, 2023
Open
@Aljullu Aljullu mentioned this pull request Mar 14, 2023
Merged
@kmanijak kmanijak mentioned this pull request Mar 15, 2023
Merged
7 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@nefeline nefeline nefeline approved these changes

Assignees

@sunyatasattva sunyatasattva

Labels
block-type: product-query Issues related to/affecting all product-query variations. focus: blocks Specific work involving or impacting how blocks behave. focus: components Work that introduces new or updates existing components. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
9.8.0
Development

Successfully merging this pull request may close these issues.

Product Query: Improve UX of the attributes filter inspector controls
2 participants
@sunyatasattva @nefeline